<template>
  <div class="deepRewrite">
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="24" v-loading="loadings">
          <el-input v-model="title" style="margin-bottom: 1%;" placeholder="请输入文章标题"></el-input>
          <Tinymce v-model="editorData" :aiTitle="title"></Tinymce>
        </el-col>
        <el-col :span="6">
          <!-- <div class="types">
            <div class="title">图片列表</div>
            <div class="btn-content">
              <img v-for="(item,index) in imageList" :key="index" :src="item.url" alt="">
            </div>
          </div> -->
        </el-col>
        <el-col :span="12" style="margin-top: 1%;">
          <el-button type="primary" @click.stop="submitDia(scope.row)">发布</el-button>
          <el-button type="primary" :disabled="loading" @click="saveArticle">保存</el-button>
          <el-button :disabled="loading" @click="goback">返回</el-button>
        </el-col>
      </el-row>
      <el-dialog
        width="30%"
        title="发布内容"
        :visible.sync="innerVisible"
        append-to-body
        v-loading="loading">
        <span>发布到</span>
        <el-select v-model="form.type" style="width: 25%;" placeholder="发布地址">
          <el-option v-for="item in typeOption" :key="item.value" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="form.module" style="width: 25%;" placeholder="发布方式">
          <el-option label="动态" value="10"></el-option>
          <el-option label="图文" value="20"></el-option>
        </el-select>
        <el-button type="primary" :disabled="loading" @click="submit">确定</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { release,cache_detail,edit_article,image_search } from "@/api/aiChange";
import Tinymce from "@/components/tinymce";
import { EventBus } from '@/utils/eventBus';
export default {
  name: 'deepRewrite',
  components: {
    Tinymce
  },
  data () {
    return {
      currentTab: 0, // 当前选中的tab索引
      currentBtn: 0,
      iconText: 'el-icon-arrow-up',
      inputState: true,
      title: '',
      loading: false,
      loadings: false,
      editorData: '',
      innerVisible: false,
      dialogVisible: false,
      current_page: 1,
      per_page: 15,
      total: 0,
      form: {
        theme: 10,
        theme_text: '',
        source_text: '',
      },
      tableData: [],
      typeOption: [
        {
          name: '百家号',
          value: 10
        }, {
          name: '头条号',
          value: 20
        }, {
          name: '微信公众号',
          value: 30
        }, {
          name: '企鹅号',
          value: 40
        }, {
          name: '大鱼号',
          value: 50
        },
      ],
      options: [
        {
          label: '营销文章',
          value: 10
        },{
          label: '新闻报道',
          value: 20
        },{
          label: '分析报告',
          value: 30
        },{
          label: '广告文案',
          value: 40
        },{
          label: '记叙文',
          value: 50
        },{
          label: '抒情散文',
          value: 60
        },{
          label: '旅游攻略',
          value: 70
        },{
          label: '其他',
          value: 80
        },
      ],
      imageList: [],
      value1: 0,
      images: [],
      routesList: [],
    }
  },
  computed: {
  },
  mounted() {
    console.log(this.$route.query.id)
    this.getArticle()
  },
  methods: {
    getArticle() {
      cache_detail({cacheArticleId: this.$route.query.id}).then(res=> {
        console.log(res)
        this.editorData = res.data.html_content
        this.title = res.data.title
        image_search({form:{
          title: this.title
        }}).then(resp => {
          console.log(resp)
          this.imageList = resp.data.data
        })
      })
    },
    goback() {
      this.$router.back()
    },
    saveArticle() {
      let query = {
        form: {
          title: this.title,
          html_content: this.editorData
        }
      }
      edit_article(query,this.$route.query.id).then(res => {
        this.$message.success(res.message)
        this.$router.back()
        this.editorData = ''
      })
    },
    submitDia(row) {
      this.innerVisible = true
      this.value1 = this.$route.query.id
    },
    submit() {
      this.loadings = true
      let query = {}
      if (this.form.type&&this.form.module) {
        query = {
          form: {
            type: this.form.type,
            module: this.form.module,
            cacheArticleId: this.value1
          }
        }
      }
      release(query).then(res=> {
        console.log(res)
        this.$message.success(res.message)
        this.innerVisible = false
        this.dialogVisible = false
        this.loadings = false
      }).catch(()=> {
        this.loadings = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>

.deepRewrite {
  padding: 20px 0;
  // display: flex;
}
.content {
  flex: 1;
}
.flex {
  display: flex;
}
.types {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #EEF1FF;
  border-radius: 8px;
  .title {
    font-size: 16px;
  }
  .btn-content {
    padding: 0 10px 10px 10px;
    height: 520px;
    overflow: scroll;
    img {
      width: fit-content;
      height: 100px;
      margin-right: 5px;
      cursor: pointer;
    }
  }

}
.colorBtn {
  background-color: #97aaff;
  color: #fff;
}
.htmlContent {
  width: 100%;
  height: 538px;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 20px;
  overflow-y: scroll;
  font-size: 14px;
  line-height: 1.5;
}
.tabs {
  position: relative;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 启用iOS的滚动回弹效果 */
}

.tabs-header {
  display: flex;
  overflow-x: auto;
  scroll-snap-align: start;
  scroll-padding: 50px; /* 根据需要调整，以显示部分下一个tab */
  scroll-behavior: smooth; /* 平滑滚动 */
  background-color: #EEF1FF;
  border-radius: 27px;
  transition: all 0.5s ease; /* 过渡效果 */
  will-change: all; /* 提示浏览器这个元素可能会有变化，以便优化性能 */
  scroll-snap-align: start;
}

.tabs-header button {
  flex: 1;
  font-size: 16px;
  // flex: 0 0 auto;
  /* 添加样式以区分不同的tab */
  padding: 15px 30px;
  border: none;
  overflow: hidden;
  background-color: #EEF1FF;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in; /* 添加过渡效果 */
}
.btnInput {
  width: 100%;
  border-radius: 27px;
  font-size: 20px;
  // flex: 0 0 auto;
  /* 添加样式以区分不同的tab */
  padding: 15px 30px;
  border: none;
  background-color: #B1B2FF;
  cursor: pointer;
  color: #fff;
}
.tabs-header button.active {
  border-radius: 27px;
  background-color: #B1B2FF;
  color: #fff;
}

.tabs-content {
  display: flex;
  transition: all 0.5s ease; /* 过渡效果 */
  will-change: all; /* 提示浏览器这个元素可能会有变化，以便优化性能 */
  scroll-snap-align: start;
  width: 100%; /* 根据需要调整 */
}

.tabs-content > div {
  flex: 0 0 100%; /* 每个tab的内容占据整个宽度 */
  padding: 20px;
  /* 添加其他样式以区分不同的tab内容 */
}

</style>

